/*
 * @Description: 统计选择
 * @Author: Zzt
 * @Date: 2022-11-10 15:22:07
 * @LastEditTime: 2022-12-27 17:56:20
 */
import { Col, DatePicker, Form, Row, Segmented, Select } from 'antd';
import { CaretDownFilled } from '@ant-design/icons';
import classNames from 'classnames/bind';
import styles from '../styles/visualization.module.scss';
import { useVisualizationContext } from '../contexts/VisualizationContext';
import { useEffect, useState } from 'react';
import MultiSelect from './Assembly/MultiSelect';
import dayjs from 'dayjs';

const cx = classNames.bind(styles);
const { RangePicker } = DatePicker;

const Operate = (props: any) => {
  const { setChartType, chartType } = useVisualizationContext();
  const { type, condition, onChange, segmented, choiceList } = props;

  const [form] = Form.useForm();
  const [chioce, setChioce] = useState({});
  // const [afterYear, setAfterYear] = useState(2007);
  // const [beforeYear, setBeforeYear] = useState(2010);
  const [segmentValue, setSegmentValue] = useState<string | number>(segmented[0]?.value);

  const changeChart = (value: any) => {
    console.log(value);
    setChartType(value);
  };
  useEffect(() => {
    onChange({ chioce, segmentValue });
  }, [chioce, segmentValue]);
  const onChangeChioce = (value: any, allValue: any) => {
    if (allValue.beyear) {
      console.log('alllllll', allValue);
      const byear = dayjs(allValue?.beyear[0]).format('YYYY');
      const eyear = dayjs(allValue?.beyear[1]).format('YYYY');
      delete allValue?.beyear;
      setChioce({ ...allValue, byear, eyear });
    } else {
      if (allValue.year) {
        const year = dayjs(allValue?.year).format('YYYY');
        setChioce({ ...allValue, year });
      } else {
        setChioce({ ...allValue });
      }
    }
  };
  return (
    <div>
      <Form
        form={form}
        onValuesChange={onChangeChioce}
        layout="inline"
        initialValues={{ danwei: '1' }}
      >
        <div className={cx('chart-operate')}>
          <div>
            <Row align="middle">
              <Col>{type}</Col>
              <Col>
                {type === '时间' ? (
                  <Form.Item key={'year'} name="year">
                    {/* <DatePicker picker="year" format="YYYY" /> */}
                  </Form.Item>
                ) : (
                  <Form.Item key={'year'} name="beyear">
                    {/* <RangePicker picker="year" bordered={false} suffixIcon /> */}
                  </Form.Item>
                )}
              </Col>
            </Row>
          </div>
          <div className={cx('chiose-operate')}>
            {condition}
            {choiceList?.map((item: any) => (
              <Form.Item name={item.name} key={item.name}>
                <MultiSelect title={item.title} checkList={item.checkList} />
              </Form.Item>
            ))}

            <Select
              suffixIcon={<CaretDownFilled />}
              value={chartType}
              bordered={false}
              className="select-after"
              options={[
                {
                  value: 1,
                  label: '饼状图'
                },
                {
                  value: 2,
                  label: '柱状图'
                },
                {
                  value: 3,
                  label: '折线图'
                }
              ]}
              onChange={changeChart}
            />
            <Form.Item>
              <Select
                suffixIcon={<CaretDownFilled />}
                bordered={false}
                className="select-after"
                defaultValue={'1'}
                options={[
                  {
                    value: '1',
                    label: '单位（万条）'
                  },
                  {
                    value: '2',
                    label: '单位（千条）'
                  }
                ]}
              />
            </Form.Item>
          </div>
        </div>
      </Form>
      <Segmented
        options={segmented}
        value={segmentValue}
        onChange={(val) => setSegmentValue(val)}
      />
    </div>
  );
};
export default Operate;
